<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>index</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <div
      style="
        position: relative;
        border-right: 1px solid #c3c3c3;
        width: 80%;
        height: 700px;
        float: left;
      "
    >
      <div
        id="myTool"
        style="
          position: absolute;
          display: none;
          width: 200px;
          padding: 15px;
          border: 1px solid #c3c3c3;
          background-color: #fff;
          -moz-box-shadow: 5px 5px 5px #888888;
          box-shadow: 5px 5px 5px #888888;
        "
      >
        <span
          ><img
            title="结束"
            class="sample"
            data-sample-connector="terminator"
            src=""
        /></span>
        <span
          ><img
            title="处理"
            class="sample"
            data-sample-connector="process"
            width="110"
            src=""
        /></span>
        <span
          ><img
            title="决策"
            class="sample"
            data-sample-connector="dicision"
            width="110"
            src=""
        /></span>
        <span
          ><img
            title="开始"
            class="sample"
            data-sample-connector="start"
            src=""
        /></span>
      </div>
      <svg
        id="myCanvas"
        width="100%"
        height="100%"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        onselectstart="return false"
      >
        <defs>
          <marker
            id="move-handler"
            markerWidth="20"
            markerHeight="10"
            refX="0"
            refY="0"
            viewBox="0 -5 10 10"
            style="cursor: pointer"
          >
            <circle
              r="2"
              stroke="black"
              stroke-width="1"
              fill="#fff"
              style="cursor: pointer"
            />
          </marker>
          <marker
            id="arrow"
            markerUnits="strokeWidth"
            markerWidth="12"
            markerHeight="12"
            viewBox="0 0 12 12"
            refX="6"
            refY="6"
            orient="auto"
          >
            <path d="M2,2 L8,6 L2,10 L6,6 L2,2" style="fill: #000000" />
          </marker>
        </defs>
      </svg>
    </div>
    <div style="float: left; width: 250px">
      <table style="width: 100%">
        <tr>
          <td>类型</td>
          <td><input name="type" id="type" value="" /></td>
        </tr>
        <tr>
          <td>编号</td>
          <td><input name="no" id="no" value="" /></td>
        </tr>
        <tr>
          <td>文本</td>
          <td><input name="desc" id="desc" value="" /></td>
        </tr>
        <tr>
          <td>动点</td>
          <td>
            <select>
              <option>无</option>
              <option>1个</option>
              <option>2个</option>
            </select>
          </td>
        </tr>
      </table>
      <button id="btnSave">保 存</button>
    </div>
  </body>
</html>
